<template>
  <div>
      <Panel title="用户余额变动日志" useBack>
      <TableEncapsulation
        slot="body"
        :changeSelectRow="(ids) => multipleSelection = ids"
        :tableConfig="tableConfig"
        :tableData="tableData"
      >
        <template slot="operation" slot-scope="operation">
          <el-button type="text" @click="()=>nav(operation.row)">--</el-button>
        </template>
        <TablePager
          slot="pager"
          v-if="pager.use"
          :size="pager.size"
          :pageChange="pageChange"
          :show-total="pager.showTotal"
          :total="pager.total"
          :current="pager.current"
        >
          <span class="demonstration">GO></span>
        </TablePager>
      </TableEncapsulation>
    </Panel>

  </div>
</template>

<script>
import request from "@/tools/request";
import Panel from "@/components/Panel";
import TableEncapsulation from "@/components/TableEncapsulation";
import SearchInput from "@/components/SearchInput";
import TablePager from "@/components/Pager";
import ModifyForm from "@/components/ModifyForm";
import ModalPanel from "@/components/ModalPanel";
import { objectFilter } from "@/tools/array";
import { dateFormat } from "@/tools/time";
import { EncryptBase, DecryptBase } from "@/tools/array"

export default {
  components: {
    Panel,
    TableEncapsulation,
    SearchInput,
    TablePager,
    ModalPanel,
    ModifyForm
  },
  data() {
    return {
      pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
      },
      appointmentTime: null,
      keywords: '',
     
      operation: true,
      account: "",
      accountStatus: "",
      multipleSelection: [],
      nickName: "",
      pager: {
        
        use: true,
        total: 0,
        current: 1,
        size: 10,
        showTotal: true
      },
      tableData: [],
      page:1,
      stId: '',
      oid: '',
      uid: '',
    };
  },
  computed: {
    tableConfig() {
      return {
        selection: false,
        columnConfig: [
          {
            type: "text",
            prop: "oid",
            label: "订单编号",
            align: "center",
          },
          {
            label: "变动金额",
            type: "text",
            prop: "change",
            align: "center"
          },
          {
            label: "变动前",
            type: "text",
            prop: "before",
            align: "center"
          },
          {
            label: "变动后",
            type: "text",
            prop: "after",
            align: "center"
          },
          {
            label: "结算单号",
            type: "text",
            prop: "stId",
            align: "center",
        
          },
          {
            label: "变动时间",
            type: "text",
            prop: "createTime",
            align: "center",
        
          },
        ].filter(Boolean)
      };
    }
  },
  methods: {
    nav(rowData){
      this.$router.push({
        path: '/user-order',
        query: {
          userId:rowData.id,
          userName: rowData.nickName
        }
      })
    },
    changeSearch(key, val) {
      this[key] = val;
      this.pager.current = 1;
    },
    balance(rowData) {
      this.$router.push({
        path: "/user/balance",
        query: {
          userId: rowData.id
        }
      })
    },
    changeKeuWord(val){
      this.keywords = val
      this.pager.current=1
    },
    pageChange(val) {
      this.pager.current = val
      this.queryData()
    },
    async queryData(){
      let uid = this.uid
      let page = this.pager.current
      // console.log('{ page, uid }',{ page, uid })/log/group/user/wallet/list
      let search = objectFilter({ page, uid })
      let res = await request({
        url: "/log/group/user/wallet/list",
        method: "POST",
        data: search
      });
      // console.log('余额变动日志',det)
      // console.log('余额变动日志',res)
      this.tableData = res.page.list
      this.pager.total = res.page.totalCount
      this.pager.current = res.page.currPage
    },
  }, 
  created() {
    if(this.$route.query.uid){
      this.uid = this.$route.query.uid
    }
    this.queryData()
  }
};
</script>

<style lang='scss' module>
.modifyStyle{

}
.search_box {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  // flex-direction: row-reverse;
  
  :global{
    .el-input{
      width: 250px;
    }
    .el-select{
      .el-input{
        width: 90px;
      }
    }
    .el-input__icon{
      line-height: 32px;
    }
  }
}

.topSelect{
  background-color: white;
  border-radius: 4px;
  padding: 20px;
  margin-bottom: 20px;
}

.selectBox {
  :global {
    label {
      font-size: 14px;
      color: #666666;
    }
    .el-input__inner {
      height: 32px;
    }
    .el-input__suffix {
      line-height: 32px;
    }
    .el-date-editor--datetime{
      width: 200px;
    }
  }
}
</style>